<template>
  <div class='doc-wrapper'>
    <header>
      <el-form :model='form' :inline='true' class='table-form' size='mini'>
        <el-row>
          <el-col :span='6'>
            <el-form-item label='文档名称:'>
              <el-input placeholder='请输入文档名称' v-model='form.fileName'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label='修改人:'>
              <el-input placeholder='请输入修改人' v-model='form.update_user'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class='form-btn-area tr'>
          <el-button type='primary' @click='query'>查询</el-button>
          <el-button type='success' @click='add'>新增</el-button>
        </div>
      </el-form>
    </header>
    <el-table :data='table' stripe @sort-change='sortChange'>
      <el-table-column label='序号' width='60'>
        <template #default='scope'>
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label='文档名称' prop='file_name' width='150' show-overflow-tooltip></el-table-column>
      <el-table-column label='上传文档名称' prop='file_origin_name' width='150' show-overflow-tooltip></el-table-column>
      <el-table-column label='可见性'>
        <template #default='scope'>
          <el-tag type='success'>{{ scope.row.state == 1 ? '可见' : '不可见' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='创建人' prop='update_user'></el-table-column>
      <el-table-column label='修改人' prop='update_user'></el-table-column>
      <el-table-column sortable='true' label='创建日期' prop='create_date' show-overflow-tooltip></el-table-column>
      <el-table-column sortable='true' label='修改日期' prop='update_date' show-overflow-tooltip></el-table-column>
      <el-table-column width='130'>
        <template #default='scope'>
          <el-link class='f12' type='primary' @click='edit(scope.$index, scope.row)'>修改</el-link>
          <el-link class='ml10 f12' type='danger' @click='remove(scope.$index, scope.row)'>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <footer class='fr'>
      <Page :total='total' v-on:query='query'></Page>
    </footer>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import request from 'request/index';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import Page from '@/components/page.vue'
export default {
  name: 'docMng',
  components: {
    Page
  },
  setup () {
    const router = useRouter();
    const total = ref(0);

    const form = reactive({
      fileName: '',
      update_user: ''
    });
    const table = ref([]);

    const sortChange = ({ column, prop, order }) => {
      query({ sortField: prop, order: order == "descending" ? -1 : 1 });
    };
    const query = (params) => {
      params = Object.assign({}, form, params);
      request.get('/blog-doc/list', params).then(data => {
        table.value = data.data;
        total.value = data.data.length;
      })
    };
    const add = () => {
      router.push({ name: 'docAdd', params: null })
    };
    const edit = (index, item) => {
      router.push({ name: 'docEdit', params: item });
    };
    const remove = (index, { _id, file_name }) => {
      request.deleteOne('/blog-doc/deleteOne', { _id, file_name }).then(data => {
        if (data && data.data)        {
          ElNotification({
            message: '文档删除成功!',
            type: 'success'
          })
        }
        query();
      })
    };
    query({});

    return {
      total,
      sortChange,
      form,
      table,
      query,
      add,
      edit,
      remove
    };
  }
};
</script>

<style lang="scss" scoped>
a.el-link.f12 {
  font-size: 12px;
}
</style>

